<template>
  <div>
    <template  v-for="item in menus" >
     <el-menu-item :key="item.id"
      v-if="isEmpty(item.childList)" :index="item.id">
        <a :href="item.menuUrl">
             • {{item.menuName}}
        </a>  
      </el-menu-item> 
    </template>

    <template v-for="item in menus" > 
     <el-sub-menu :key="item.id" 
      v-if="!isEmpty(item.childList)" :index="item.id">  
      <!-- 三级菜单 -->
      <template #title>{{item.menuName}}</template>
      <el-menu-item v-for="subitem in item.childList"
        :index="subitem.id"
        :key="subitem.id">
        <a :href="item.menuUrl">
          {{subitem.menuName}}
        </a>  
      </el-menu-item>
    </el-sub-menu>
     </template>
  </div>
 
</template>

<script>
import { defineComponent} from 'vue' 
import { isEmpty } from "lodash"

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

export default defineComponent({
  name: 'MenuItem',  
	props: {
    menus: Array, 
  },
  setup() { 
		return {
      isEmpty
    }
  },
})
</script>
